<template>
  <div class="sidebar">
    <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#fff"
      text-color="#000" active-text-color="#20a0ff" unique-opened :router="true" @select="handleSelect">
      <template v-for="item in items">
        <template v-if="item.list&&item.list.length">
          <el-submenu :index="item.route" :key="item.route">
            <template slot="title">
              <i :class="['icon',`icon-${item.route}`]"></i>
              <span slot="title">{{ item.name }}</span>
            </template>
            <template v-for="subItem in item.list">
              <el-submenu v-if="subItem.list&&subItem.list.length" :index="subItem.route" :key="subItem.route">
                <template slot="title">{{ subItem.name }}</template>
                <el-menu-item v-for="(threeItem,i) in subItem.list" :key="i" :index="threeItem.route">
                  {{ threeItem.name }}</el-menu-item>
              </el-submenu>
              <el-menu-item v-else :index="subItem.route" :key="subItem.route">{{ subItem.name }}</el-menu-item>
            </template>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="item.route" :key="item.route">
            <i :class="['icon',`icon-${item.route}`]"></i>
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
import bus from '../common/bus';
import { getMenu } from '../../api/index'

export default {
  data () {
    return {
      collapse: false,
      items: []
    };
  },
  computed: {
    onRoutes () {
      return this.$route.path.replace('/', '');
    }
  },
  created () {
    // 通过 Event Bus 进行组件间通信，来折叠侧边栏
    getMenu().then(res => {
      if (res.success) {
        this.items = res.data;
        console.log(this.items);
      } else {
        this.$message.error(`${res.msg}`)
      }
    })
    bus.$on('collapse', msg => {
      this.collapse = msg;
      bus.$emit('collapse-content', msg);
    });
  },
  methods: {
    handleSelect (key, keyPath) {
    }
  }
};
</script>

<style scoped>
.sidebar {
    display: block;
    position: absolute;
    left: 0;
    top: 70px;
    bottom: 0;
    overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
    width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
    width: 250px;
}
.sidebar > ul {
    height: 100%;
}
.icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    background-size: 100% 100%;
}
.icon-dashboard {
    background-image: url('../../assets/img/index.png');
}
.icon-1 {
    background-image: url('../../assets/img/enterprise.png');
}
.icon-2 {
    background-image: url('../../assets/img/personal.png');
}
.icon-3 {
    background-image: url('../../assets/img/content.png');
}
.icon-4 {
    background-image: url('../../assets/img/jobfair.png');
}
.icon-5 {
    background-image: url('../../assets/img/manage.png');
}
.icon-6 {
    background-image: url('../../assets/img/datacenter.png');
}
.icon-7 {
    background-image: url('../../assets/img/employment.png');
}
</style>
